﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScenePhoto.aspx.cs" Inherits="House客户端.ScenePhoto" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>现场图片页面</title>
    <link href="jquery-easyui-1.5.2/themes/default/easyui.css" rel="stylesheet" />
    <link href="easyui/css/wu.css" rel="stylesheet" />
    <link href="easyui/css/icon.css" rel="stylesheet" />
    <style>
        .file {
            position: relative;
            display: inline-block;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 10px 10px 10px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }
    </style>
</head>
<body>
    <input type="text" hidden="hidden" id="username" value="<%=Request["username"]%>" />
    <form id="Form1" enctype="multipart/form-data">
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件 
     <input type="file" name="image" id="txtimg0" />
            <img id="imgs0" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb0" onclick="fileup()"></label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg1" />
            <img id="imgs1" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb1" onclick="fileup1()">卫生间</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg2" />
            <img id="imgs2" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb2" onclick="fileup2()">厨房</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg3" />
            <img id="imgs3" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb3" onclick="fileup3()">主卧</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg4" />
            <img id="imgs4" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb4" onclick="fileup4()">次卧</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg5" />
            <img id="imgs5" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb5" onclick="fileup5()">书房</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg6" />
            <img id="imgs6" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb6" onclick="fileup6()">阳台</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg7" />
            <img id="imgs7" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb7" onclick="fileup7()">露台</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg8" />
            <img id="imgs8" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb8" onclick="fileup8()">小院</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg9" />
            <img id="imgs9" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb9" onclick="fileup9()">浴室</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg10" />
            <img id="imgs10" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb10" onclick="fileup10()">储物间</label>
        </a>
        <a href="javascript:;" class="file" style="width: 200px; text-align: center">浏览文件
     <input type="file" name="image" id="txtimg11" />
            <img id="imgs11" src="" width="200" height="100" style="border: 1px solid #99D3F5; margin-top: 3px" />
            <label style="color: #000000" id="lb11" onclick="fileup11()">客厅</label>
        </a>
    </form>
    <a href="#" id="submit" class="easyui-linkbutton" onclick="tijiao()">提交</a>
    <script src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script src="jquery-easyui-1.5.2/easyloader.js"></script>
    <script src="jquery-easyui-1.5.2/jquery.params.js"></script>
    <script src="jquery-easyui-1.5.2/Common.js"></script>
    <script>
        // var ImgUri = "";
        //显示图片1
        function fileup() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg0").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs0").src = this.result;
            }
        }
        //显示图片2
        function fileup1() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg1").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs1").src = this.result;
            }
        }
        //显示图片3
        function fileup2() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg2").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs2").src = this.result;
            }
        }
        //显示图片4
        function fileup3() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg3").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs3").src = this.result;
            }
        }
        //显示图片5
        function fileup4() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg4").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs4").src = this.result;
            }
        }
        //显示图片6
        function fileup5() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg5").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs5").src = this.result;
            }
        }
        //显示图片7
        function fileup6() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg6").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs6").src = this.result;
            }
        }
        //显示图片8
        function fileup7() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg7").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs7").src = this.result;
            }
        }
        //显示图片9
        function fileup8() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg8").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs8").src = this.result;
            }
        }
        //显示图片10
        function fileup9() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg9").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs9").src = this.result;
            }
        }
        //显示图片11
        function fileup10() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg10").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs10").src = this.result;
            }
        }
        //显示图片12
        function fileup11() {
            //检验是否为图像文件  
            var file = document.getElementById("txtimg11").files[0];
            if (!/image\/\w+/.test(file.type)) {
                $.messager.alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            //将文件以Data URL形式读入页面  
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                //给图片赋值  js写法
                document.getElementById("imgs11").src = this.result;
            }
        }
        function tijiao() {
            var ProjectNumber = $.query.get("ProjectNumber");
            var imgName = $("#lb0").text() + "," + $("#lb1").text() + "," + $("#lb2").text() + "," + $("#lb3").text() + "," + $("#lb4").text() + "," + $("#lb5").text() + "," + $("#lb6").text() + "," +
                $("#lb7").text() + "," + $("#lb8").text() + "," + $("#lb9").text() + "," + $("#lb10").text() + "," + $("#lb11").text();
            var imgUri = document.getElementById("imgs0").src +
                document.getElementById("imgs1").src +
                document.getElementById("imgs2").src +
                document.getElementById("imgs3").src +
                document.getElementById("imgs4").src +
                document.getElementById("imgs5").src +
                document.getElementById("imgs6").src +
                document.getElementById("imgs7").src +
                document.getElementById("imgs8").src +
                document.getElementById("imgs9").src +
                document.getElementById("imgs10").src +
                document.getElementById("imgs11").src;
            if (imgName.length == 37 || imgUri.length == 780) {
                $.messager.alert("提示", '请选择要上传的图片！');
                return;
            }
            $.ajax({
                type: "post",
                url: WebApiURL + "api/values/Upload",
                data: {
                    ProjectNumber: ProjectNumber,
                    Photo_Name: imgName,
                    Photo_Url: imgUri
                },
                success: function (result) {
                    if (result > 0) {
                        $.messager.alert("提示", '添加成功！');
                    } else {
                        $.messager.alert("提示", '添加失败！');
                    }
                }
            })
        }
    </script>
</body>
</html>
